<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
    <text class="title">开通小程序</text>
  </view>
  <scroll-view class="scroll-view" scroll-y>
    <view class="content">
      <view class="imgItem">
        <view class="imgItemP1">我也要开通获客小程序</view>
        <view class="imgItemP2">加入我们 更快获得成交</view>
      </view>
      <view class="wrapper1">
        <view class="wrapper1-item">
          <view>公司全称<span class="star">*</span></view>
          <view class="inputContent"
            ><input
              type="text"
              name=""
              v-model="companyName"
              placeholder="请输入公司名称"
          /></view>
        </view>
        <view class="wrapper1-item">
          <view>联系人姓名<span class="star">*</span></view>
          <view class="inputContent"
            ><input
              type="text"
              name=""
              v-model="contactName"
              placeholder="请输入联系人姓名"
          /></view>
        </view>
        <view class="wrapper1-item">
          <view>手机号<span class="star">*</span></view>
          <view class="inputContent"
            ><input type="text" name="" v-model="contactTel" placeholder="请输入手机号码"
          /></view>
        </view>
        <view class="useSys" @click="applySysBtn">申请使用系统</view>
      </view>
      <view class="wrapper2">
        <view class="text1">我们的服务</view>
        <view class="text2">7x24小时客户响应，5x8小时技术辅助</view>
        <view class="wrapper2-content">
          <view class="wrapper2-item">
            <image src="http://xcxtp.njmswl.com/images/server.png" class="wrapper2Img" />
            <view class="wrapper2Title">专属客服顾问</view>
            <view class="wrapper2Text"
              >一对一的专属产品客服，协助您快速解决使用过程中的任何疑难问题</view
            >
          </view>
          <view class="wrapper2-item">
            <image src="http://xcxtp.njmswl.com/images/safe.png" class="wrapper2Img" />
            <view class="wrapper2Title">运行安全稳定</view>
            <view class="wrapper2Text"
              >拥有成熟研发经验的资深技术团队全方位保护使用过程中的数据安全</view
            >
          </view>
          <view class="wrapper2-item">
            <image src="http://xcxtp.njmswl.com/images/update.png" class="wrapper2Img" />
            <view class="wrapper2Title">持续升级功能</view>
            <view class="wrapper2Text"
              >基于客户需求及市场变化进行优化升级，持续输出强需求的产品功能</view
            >
          </view>
        </view>
      </view>
      <view class="wrapper3">
        <view class="support">南京蓝鸽房地产营销策划有限公司</view>
        <!-- <view class="contact">联系方式: 0592-7181661</view> -->
      </view>
    </view>
  </scroll-view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import OpenProgram from "../components/openProgram.vue";
import { computed } from "vue";
import { onLoad,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import { getOpenMiniProgramAPI } from "@/services/openMinProgram";
//
const menu = ref({});

// 公司名称
const companyName = ref("");
// 联系人名称
const contactName = ref("");
// 联系人手机号
const contactTel = ref("");
// 申请小程序函数参数
const params = {
  id: 1,
  companyName: companyName.value,
  contacts: contactName.value,
  phone: contactTel.value,
};
// 申请使用系统函数
const getOpenMiniProgramData = async () => {
  const res = await getOpenMiniProgramAPI({
    id: 1,
    companyName: companyName.value,
    contacts: contactName.value,
    phone: contactTel.value,
  });
  if (res.code == 0) {
    uni.showToast({
      title: "提交成功！",
      icon: "success",
    });
  } else {
    uni.showToast({
      title: res.msg,
      icon: "error",
    });
  }
};
const applySysBtn = async () => {
  if (!companyName.value) {
    uni.showToast({
      title: "请输入公司名称",
      icon: "none",
    });
  } else if (!contactName.value) {
    uni.showToast({
      title: "请输入联系人名称",
      icon: "none",
    });
  } else if (!contactTel.value) {
    uni.showToast({
      title: "请输入手机号码",
      icon: "none",
    });
  } else {
    getOpenMiniProgramData();
  }
};
// 返回上一页函数
function goBack() {
  uni.navigateBack();
}

onLoad(() => {
  menu.value = uni.getMenuButtonBoundingClientRect();
  // console.log(this.menu);
});
//uniapp微信小程序分享页面到微信好友
onShareAppMessage(()=>{

})
//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(()=>{

})
</script>
<style lang="scss">
page {
  display: flex;
  height: 100%;
  background-color: #f4f5fd;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}

.navbar {
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 49rpx;

  .goBack {
    position: absolute;
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 7rpx;
  }

  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.content {
  position: relative;
  height: 1740rpx;
  background-color: #f4f5fd;

  font-family: PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #687a8c;

  .imgItem {
    .imgItemP1 {
      width: 749rpx;
      height: 34rpx;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
    }

    .imgItemP2 {
      width: 749rpx;
      height: 23rpx;
      margin-top: 16rpx;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
    }

    width: 749rpx;
    height: 417rpx;

    padding-top: 66rpx;
    background-image: url(http://xcxtp.njmswl.com/images/openProgramImg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.wrapper1 {
  position: absolute;
  z-index: 1;
  width: 694rpx;
  height: 690rpx;
  margin-left: 26rpx;
  padding-left: 26rpx;
  top: 292rpx;
  background: #ffffff;
  border-radius: 25rpx;

  .wrapper1-item {
    margin-top: 40rpx;
  }
}

.wrapper2 {
  position: absolute;
  top: 1010rpx;
  z-index: 1;
  width: 694rpx;
  height: 510rpx;
  padding-top: 60rpx;

  margin-left: 26rpx;
  background: #ffffff;
  border-radius: 25rpx;

  .wrapper2-content {
    display: flex;
    justify-content: center;
    align-items: center;

    .wrapper2-item {
      .wrapper2Title {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        margin-top: 15rpx;
        margin-bottom: 17rpx;
        color: #000000;
      }

      width: 160rpx;
      height: auto;
      text-align: center;
      margin: 0 auto;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      line-height: 30rpx;

      .wrapper2Text {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #687a8c;
      }

      .wrapper2Img {
        width: 85rpx;
        height: 85rpx;
      }
    }
  }
}

.star {
  color: #e75841;
}

.inputContent {
  display: flex;
  align-items: center;
  width: 644rpx;
  height: 90rpx;
  padding-left: 24rpx;
  margin-top: 19rpx;
  background: #f4f5fc;
  border-radius: 10rpx;
}

.useSys {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 644rpx;
  height: 90rpx;
  margin-top: 34rpx;
  background: #3bc48c;
  border-radius: 10rpx;

  font-family: PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #ffffff;
}

.text1 {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  color: #000000;
  margin-left: 24rpx;
  margin-bottom: 15rpx;
}

.text2 {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #687a8c;
  margin-left: 24rpx;
  margin-bottom: 41rpx;
}

.wrapper3 {
  position: absolute;
  width: 750rpx;
  bottom: 61rpx;

  .support {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .contact {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #687a8c;
    display: flex;
    justify-content: center;
  }
}
</style>
